require("../less/particulars.less");
document.ready(function() {

    axios.defaults.baseURL = "http://139.9.177.51:8099";

    let video = document.querySelector('#video');
    let img = document.querySelector('#img');
    let fragments = JSON.parse(sessionStorage.fragments); //课程的每个视频和图片

    console.log(fragments);
    let takeTime = 0; //定义训练的事件
    let index = 0; //表示视频的索引
    document.querySelector('#vLength').textContent = fragments.length;
    dataRender();

    function dataRender() {
        video.src = "http://139.9.177.51:8099" + fragments[index].videoUrl;
        img.src = "http://139.9.177.51:8099" + fragments[index].imgUrl;
        document.querySelector('#vIndex').textContent = index + 1;
        document.querySelector('#vTitle').textContent = fragments[index].title;
        document.querySelector('#mTitle').textContent = fragments[index].title;
        // 渲染完成后自动播放视频
        autoPlayVideo();

    }

    //向前翻视频
    document.querySelector('#backwards').addEventListener('click', function() {
        index++;
        if (index == fragments.length) {
            index = 0;
        }
        dataRender();
    })

    //向后翻视频
    document.querySelector('#forward').addEventListener('click', function() {
        index--;
        if (index == -1) {
            index = fragments.length - 1;
        }
        dataRender();
    })


    let timeId = null;

    //自动播放
    function autoPlayVideo() {
        video.play();
        document.querySelector('.pauseMask').style.display = 'none';
        //保证页面中相同作用定时器只有一个
        //进度条
        timeId = setInterval(function() {
            document.querySelector('#proBar').style.width = video.currentTime * 100 / video.duration + '%';
            takeTime += 10;
        }, 10)
    }

    //暂停按钮
    document.querySelector('#playpause').addEventListener('click', function() {
        video.pause();
        //保证页面中同一作用的定时器只有一个
        clearInterval(timeId);
        document.querySelector('.pauseMask').style.display = 'block';
    })

    //继续播放按钮
    document.querySelector('.goon').addEventListener('click', function() {
        autoPlayVideo();
    })

    //给视频添加结束事件，自动播放下一个视频
    video.addEventListener('ended', function() {
        //当视频播放到最后一个时，自动翻到下一个视频，但不播放
        if (index < fragments.length - 1) {
            document.querySelector('#backwards').click();
        } else {
            videoEndRender();
            document.querySelector('#playpause').click();
        }


    })

    //保存课程训练数据 退出播放按钮
    document.querySelector('.over').addEventListener('click', function() {
        let params = {
            id: localStorage.userId,
            userId: sessionStorage.courseId,
            takeTime: takeTime / 1000,
            calorie: takeTime / 1000 * 0.3
        }
        axios.post("/sports/saveTrain", params)
            .then(function(res) {
                console.log(res.data);
                if (res.data.status == 0) {
                    window.$utils.tipsFn('保存训练数据成功', res.data.status);
                    setTimeout(function() {
                        location.href = './training.html';
                    }, 2000);
                } else {
                    window.$utils.tipsFn('保存训练数据失败', res.data.status);
                    setTimeout(function() {
                        location.href = './training.html';
                    }, 2000);
                }
            })
            .catch(function(err) {
                console.log(err);
            })
    })

    //返回上一页按钮
    document.querySelector('#backprev').addEventListener('click', function() {
        history.back();
    })

    //当视频到最后一个时 向前翻视频，但不自动播放
    function videoEndRender() {
        index = 0;
        video.src = "http://139.9.177.51:8099" + fragments[index].videoUrl;
        img.src = "http://139.9.177.51:8099" + fragments[index].imgUrl;
        document.querySelector('#vIndex').textContent = index + 1;
        document.querySelector('#vTitle').textContent = fragments[index].title;
        document.querySelector('#mTitle').textContent = fragments[index].title;
    }















})